<template>
  <div>
    <div>
      <div
        style="
          height: 200px;
          position: relative;
          top: 20px;
          left: 20px;
          background-color: aqua;
        "
      ></div>
      <div style="height: 200px; background-color: aquamarine"></div>
    </div>
    <div v-if="false">
      <div>
        <div
          style="height: 20px; margin: 50px; background-color: antiquewhite"
        ></div>
        <div style="height: 20px; margin: 100px; background-color: aqua"></div>
      </div>
      <div style="width: 400px; height: 400px; text-align: left">
        <div>
          <div
            style="
              display: inline-block;
              width: 100px;
              height: 20px;
              margin: 50px;
              background-color: antiquewhite;
            "
          ></div>
          <div
            style="
              display: inline-block;
              width: 100px;
              height: 20px;
              margin: 100px;
              background-color: aqua;
            "
          ></div>
        </div>
      </div>
    </div>
    <div v-if="false">
      <div class="content-box common-css"></div>
      <div class="split"></div>
      <div class="border-box common-css"></div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.common-css {
  width: 200px;
  height: 200px;
  margin: 50px;
  padding: 50px;
  background-color: aqua;
  border: 1px solid #000;
}
.content-box {
  box-sizing: content-box;
}
.split {
  width: 100%;
  border-top: 1px solid #333;
}
.border-box {
  box-sizing: border-box;
}
</style>
